<template>
  <div class="q-pa-md">
    <!--
      Anything after view="lHh lpr lFf" is only needed
      so we can display this example in the documentation

      Remove this part: container style="height: 400px" class="shadow-2 rounded-borders"
    -->
    <t-layout
      view="lHh lpr lFf"
      container
      style="height: 400px"
      class="shadow-2 rounded-borders"
    >
      <t-header elevated>
        <t-bar class="q-electron-drag">
          <t-icon name="laptop_chromebook" />
          <div>Google Chrome</div>

          <t-space />

          <t-btn dense flat icon="minimize" @click="minimize" />
          <t-btn dense flat icon="crop_square" @click="toggleMaximize" />
          <t-btn dense flat icon="close" @click="closeApp" />
        </t-bar>

        <div class="q-pa-sm q-pl-md row items-center">
          <div class="cursor-pointer non-selectable">
            File
            <t-menu>
              <t-list dense style="min-width: 100px">
                <t-item clickable v-close-popup>
                  <t-item-section>Open...</t-item-section>
                </t-item>
                <t-item clickable v-close-popup>
                  <t-item-section>New</t-item-section>
                </t-item>

                <t-separator />

                <t-item clickable>
                  <t-item-section>Preferences</t-item-section>
                  <t-item-section side>
                    <t-icon name="keyboard_arrow_right" />
                  </t-item-section>

                  <t-menu anchor="top end" self="top start">
                    <t-list>
                      <t-item v-for="n in 3" :key="n" dense clickable>
                        <t-item-section>Submenu Label</t-item-section>
                        <t-item-section side>
                          <t-icon name="keyboard_arrow_right" />
                        </t-item-section>
                        <t-menu auto-close anchor="top end" self="top start">
                          <t-list>
                            <t-item v-for="n in 3" :key="n" dense clickable>
                              <t-item-section>3rd level Label</t-item-section>
                            </t-item>
                          </t-list>
                        </t-menu>
                      </t-item>
                    </t-list>
                  </t-menu>
                </t-item>

                <t-separator />

                <t-item clickable v-close-popup @click="closeApp">
                  <t-item-section>Quit</t-item-section>
                </t-item>
              </t-list>
            </t-menu>
          </div>

          <div class="q-ml-md cursor-pointer non-selectable">
            Edit
            <t-menu auto-close>
              <t-list dense style="min-width: 100px">
                <t-item clickable>
                  <t-item-section>Cut</t-item-section>
                </t-item>
                <t-item clickable>
                  <t-item-section>Copy</t-item-section>
                </t-item>
                <t-item clickable>
                  <t-item-section>Paste</t-item-section>
                </t-item>
                <t-separator />
                <t-item clickable>
                  <t-item-section>Select All</t-item-section>
                </t-item>
              </t-list>
            </t-menu>
          </div>
        </div>
      </t-header>

      <t-page-container>
        <t-page class="q-pa-md">
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  // We guard the Electron API calls with the optional chaining JS operator,
  // but this is only needed if we build same app with other Quasar Modes
  // as well (SPA/PWA/Cordova/SSR...)

  export default {
    setup() {
      function minimize() {
        window.myWindowAPI?.minimize();
      }

      function toggleMaximize() {
        window.myWindowAPI?.toggleMaximize();
      }

      function closeApp() {
        window.myWindowAPI?.close();
      }

      return { minimize, toggleMaximize, closeApp };
    },
  };
</script>
